<template>
    <div class="userClass">

        <!-- 搜索框 -->
        <div class="userHeader">
            <el-input
                    width="20px"
                    placeholder="搜索"
                    prefix-icon="el-icon-search"
                    suffix-icon="el-icon-close"
                    v-model="searchInput">
                <template slot="append">
                    <el-button icon="el-icon-plus" @click="openAddFriendDialog"></el-button>
                </template>
            </el-input>
        </div>

        <!-- 用户列表信息 -->
        <div class="userMain">
            <el-tabs v-model="activeName" style="margin: 0 10px">
                <el-tab-pane label="好友信息" name="userInfoList">
                    <el-menu style="background-color: #f5f6f7"
                             :default-active='activeFriendIndex'
                             class="el-menu-vertical-demo"
                             active-text-color="#000000"
                    >
                        <template v-for="(item,index) in leftUserArray">
                            <el-menu-item :key="item.uid"
                                          style="height: 70px;margin-top: 10px;"
                                          @click="chatToFriend(item)"
                                          :class="item.uid===activeFriendIndex?'firstFriend':''">
                                <el-row :gutter="20">
                                    <el-col :span="8">
                                        <el-badge :value="item.msg_num" class="item" v-bind:hidden="item.msg_num<=0">
                                            <img :src="item.img" width="40" height="40" :class="item.onlion === 0?'gray':''">
                                        </el-badge>
                                    </el-col>
                                    <el-col :span="16" style="text-align: left">
                                        <span style="font-size: 16px">{{ item.alias }}</span>
                                    </el-col>
                                </el-row>
                            </el-menu-item>
                        </template>
                    </el-menu>
                </el-tab-pane>
                <el-tab-pane label="系统信息" name="systemInfoList">
                    系统信息
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
    import * as $api from '../../api/Apis'
    import * as $Constants from '../../api/Constants'

    export default {
        name: "leftUser",
        data() {
            return {
                leftUserArray: [],
                searchInput: '',
                isShowAddFriendsDialog: false,
                activeFriendIndex:'',
                leftSystemMessages:[],
                activeName:'userInfoList'
            }
        },
        mounted() {
            this.leftNavUser();
            this.listenerSendMessage();
            this.listenerFriendLoginMessage();
        },
        methods: {
            leftNavUser() {
                let uid = window.localStorage.getItem('uid');
                let params = {
                    uid: uid
                };
                let that = this;
                if (this.$store.state.messageManager === null) {
                    $api.queryFriendsInfo(params).then(res => {
                        that.$store.commit('setMessageManager', res.data);
                        that.dealMessagesInfo(res.data);
                    });
                } else {
                    let messages = this.$store.state.messageManager;
                    that.dealMessagesInfo(messages);
                }
            },
            /**
             * 处理消息内容
             * @param messsages
             */
            dealMessagesInfo(messsages) {
                for (let key in messsages) {
                    let user = messsages[key].friend;
                    user.msg_num = messsages[key].msg_num;
                    this.leftUserArray.push(user);
                }
            },

            /**
             * 处理消息数量
             * @param item
             */
            dealMessageNum(item) {
                let that = this;
                for (let i = 0; i < that.leftUserArray.length; i++) {
                    if (item.uid === that.leftUserArray[i].uid) {
                        that.leftUserArray[i].msg_num = 0;
                        break;
                    }
                }
                this.$forceUpdate();
            },
            // 打开弹框
            openAddFriendDialog() {
                // this.$message.warning('功能正在完善中......');
                this.$root.Bus.$emit('openDialog', true);
            },
            // 点击找朋友聊天
            chatToFriend(item) {
                this.activeFriendIndex = item.uid;
                /*
                1.获取离线的聊天信息
                2.加载到页面上
                3.所有消息设置为已读
                 */
                let params = {};
                params.fromUser = window.localStorage.getItem('uid');
                params.toUser = item.uid;
                let that = this;
                this.dealMessageNum(item);
                $api.queryNoReadMessage(params).then(res => {
                    if (res.code === 200) { // 表示当前消息已经被阅读了
                        let messageManager = that.$store.state.messageManager;
                        that.$root.Bus.$emit('noReadMessage', messageManager[item.uid].messages, item);
                    } else {
                        that.$message.error(res.message);
                    }
                });
            },
            // 监听chatMain组件发送的消息事件
            listenerSendMessage(){
                let that = this;
                this.$root.Bus.$on('sendMessage', msg => {
                    for(let i=0 ; i<that.leftUserArray.length ; i++ ){
                        if( that.leftUserArray[i].uid === msg.fromUser ){
                            that.leftUserArray[i].msg_num += 1;
                            break;
                        }
                    }
                    that.$forceUpdate();
                })
            },
            // 监听好友上线信息
            listenerFriendLoginMessage(){
                let that = this;
                this.$root.Bus.$on('friendLoginMessage', msg=> {
                    /*
                    fromUser 上线的人信息
                    toUser 是自己
                     */
                    let index = 0;
                    for(let i=0 ; i<that.leftUserArray.length ; i++ ){
                        if( that.leftUserArray[i].uid === msg.fromUser ){
                            index = i;
                            break;
                        }
                    }
                    this.$set(this.leftUserArray[index],'onlion',$Constants.USER_ONLION_YES);
                    this.$message.success('您的好友['+msg.fromUserName+']上线了...');
                })
            }
        }
    }
</script>

<style scoped>
    .userClass {
        /*overflow:auto;*/
        height: 100%;
        background-color: #f5f6f7;
    }

    .userHeader {
        height: 8%;
    }

    .userMain {
        padding-top: 5%;
        height: 90%;
        overflow: auto;
    }

    .firstFriend {
        background-color: #00B83F;
        border-radius: 5px;
    }

    .userOnlion {
        background-color: #0000FF;
    }

    .userOutlion {
        background: #c7edcc;
    }

    /** 设置背景图片为黑白色 */
    .gray {
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);

        filter: grayscale(100%);

        filter: gray;
    }
</style>
